
<template>
 <van-sticky>
      <el-header class="el-header">

        <div>
          <img
            :src="headPic"
            class="qwert"
            style="width: 1rem; height: 1rem; border-radius: 50%; margin-left: 0.05rem"
            alt=""
            @click="yyyiii"
          />
        </div>
        <div>
          <img src="@/assets/3.png" alt="" class="ld"  @click="xiaoxi"/>
        </div>
      </el-header>
    </van-sticky>

          <el-main >
         <div class="zhaozi"></div>
      <div class="tou">

        <div
          v-for="item in datalist"
          :key="item.id"
          class="okl"
          @click="dian(item)"
          :class="{ on: active === item.id }"
        >
          <div>
            {{ item.departmentName }}
          </div>
        </div>
      </div>



       <div class="dw"><img src="@/assets/2.png" alt="" @click="ssy" class="ooo" /></div>
    </el-main>
    <VirtualList :items="items">
       <div v-for="item in data" :key="item.id" @click="wang(item.sickCircleId)">
      <div class="asd">
        <h2 style="color: rgb(96, 96, 96);">{{ item.title }}</h2>
        <p class="yuiop" style="line-height: .8rem;">{{ item.releaseTime }}</p>
        <p style="color: rgb(91, 91, 91); font-size:0.18rem;">{{ item.detail }}</p>
        <div class="ding"></div>

        <p class="zxc">收藏 {{ item.collectionNum }}<span></span>建议 {{ item.commentNum }}</p>
      </div>
    </div>
     <div class="xie">
    <img src="@/assets/编辑(1).png" alt="" @click="fabiao" />
  </div>
  <div class="dxhz">
    <img src="@/assets/主页(1).png" alt="" class="zhuye" @click="zyzy" />
    <img src="@/assets/播放(1).png" alt="" class="bofang" @click="onWatch" />
  </div>

    </VirtualList>

</template>

<script setup>
import VirtualList from '@/components/XNLB/index.vue';

import { ref } from 'vue'

import { Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import router from '@/router'
import axios from 'axios'
const route = useRouter()
const wang = (sickCircleId) => {
  console.log()
  router.push({
    name: 'youdetail',
    params: {
      sickCircleId:sickCircleId
    },
  })
  console.log(sickCircleId)
}
const xiaoxi=()=>{
  router.push('/my_message')
}
const active = ref(1)
const datalist = ref([])
const headPic = localStorage.getItem('headPic')
const yyyiii = () => {
  router.push('/my')
}
const dian = (item) => {
  active.value = item.id
  getlist2(item.id)
}
const ssy = () => {
  router.push('/sousuo')
}
const fabiao = () => {
  router.push('/fabiao')
}
const zyzy = () => {
  router.push('/home')
}
// 播放视频
const onWatch = () => {
  router.push('/video')
}


const getlist = async (active) => {
  let res = await axios.get(`/health/share/knowledgeBase/v1/findDepartment`)
  console.log(res)
  datalist.value = res.data.result
}
// const getlist3 = () => {
//     axios.get('/health/share/knowledgeBase/v1/findDrugsCategoryList').then((res) => {
//         // kunlist.value = res.data.result;
//         console.log(kunlist.value);
//     });
// };
// getlist3();
getlist()
const data = ref([])
const getlist2 = async (active) => {
  let res = await axios.get(`/health/user/sickCircle/v1/findSickCircleList`, {
    params: {
      departmentId: active,
      page: 1,
      count: 10,
    },
  })

  data.value = res.data.result
  console.log(res)
}
getlist2(active.value)

const items = Array.from({ length: 10000 }, (v, k) => ({
  id: k,
  name: `Item ${k + 1}`,
}));

const ItemComponent = {
  template: '<div class="custom-item"><slot></slot></div>',
};
</script>

<style scoped lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  color: #2c3e50;
  margin-top: 60px;
}
.custom-item {
  line-height: 30px; /* 与 itemHeight 相同 */
  padding: 0 10px;
}
.yuiop {
  display: block;
  color: #747474;
  font-size: 8px;

  width: 100%;
  height: .8rem; //.8rem * 0.5 = 0.4rem
}
.zhuye {
  width: 1rem; // 1rem * 0.5 = 0.5rem
  height: 1rem; // 1rem * 0.5 = 0.5rem
  position: absolute;
  left:  1rem; // 1rem * 0.5 = 0.5rem
  top:5%; // 5% * 0.5 = 2.5%
}
.zhaozi{
  width: .5rem; //.5rem * 0.5 = 0.25rem
  height: 1.6rem; //.8rem * 0.5 = 0.4rem
  position: absolute;
  top: 1.65rem; // 1.65rem * 0.5 = 0.825rem
  z-index: 200; // 200 * 0.5 = 100
  box-shadow: 5px 0 7.5px -2.5px rgba(255, 255, 255, 0.3); /* 向右阴影扩散样式，各参数减半 */
  left: 0%;
  background-color: #fff;
}
.bofang {
  width: 1rem; // 1rem * 0.5 = 0.5rem
  height: 1rem; // 1rem * 0.5 = 0.5rem
  position: absolute;
  right: 1rem; // 1rem * 0.5 = 0.5rem
  top: 5%; // 5% * 0.5 = 2.5%
}
.dxhz {
  width: 100%;
  height:1.4rem; // 1.4rem * 0.5 = 0.7rem
  background-color: #fff;
  position: fixed;
  bottom: 0%;
  left: 0%;
  background-image: url('../../assets/beijing1.png');
  background-size: 100% 100%;
  z-index: 998; // 998 * 0.5 = 499
}

.qwert {
  margin-right: 0.1rem; // 0.1rem * 0.5 = 0.05rem
}
.ding {
  width: 100%;
  height:  1.5rem ; // 1rem * 0.5 = 0.5rem
}
.on {
  color: rgb(0, 120, 195);
}

.ooo {
  position: absolute;
  top: -38%; // -38% * 0.5 = -19%
  left: 0%;
}
.tou {
  width: 17rem; // 17rem * 0.5 = 8.5rem
  color: rgb(169, 169, 169);
  font-size:  0.4rem ; // 0.4rem * 0.5 = 0.2rem
  font-weight: 520;
  /* background-color: yellow; */
  display: flex;
  overflow-x: auto;
  text-align: center;
  position: relative;
}
.dw {
  width: 55px; // 110px * 0.5 = 55px
  height: 40px; // 52px * 0.5 = 26px
  box-shadow: -15px 0 5px 0 rgba(255, 255, 255, 1); // 各阴影参数减半
  margin-top:  10px; // 10px * 0.5 = 5px
  position: absolute;
  left: 84.7%;
  top: 1.85rem; // 1.6rem * 0.5 = 0.8rem
  background-color: #fff;
  border-left:  1px solid #616060; // 2px * 0.5 = 1px

  img {
    margin-top:  .65rem; // 0.35rem * 0.5 = 0.175rem
    width: 0.6rem; // 0.6rem * 0.5 = 0.3rem
    height: 0.6rem; // 0.6rem * 0.5 = 0.3rem
    margin-left: 0.25rem; // 0.3rem * 0.5 = 0.15rem
  }
}
.okl {
  width:  2rem; // 2rem * 0.5 = 1rem
  height: 100%;
  line-height:  0.7rem; // 0.7rem * 0.5 = 0.35rem
  font-size: 16px; // 32px * 0.5 = 16px
  font-weight: 500;
}
.ld {
  margin-bottom: 2px; // 2px * 0.5 = 1px
  width: 0.7rem; // 0.7rem * 0.5 = 0.35rem
  height: 0.8rem; // 0.8rem * 0.5 = 0.4rem
  margin-right: 0.1rem; // 0.1rem * 0.5 = 0.05rem
}
.uuiii {
  position: fixed;
  font-size: 1rem; // 1rem * 0.5 = 0.5rem
  left: 43%;
  bottom: 13%; // 13% * 0.5 = 6.5%
}
.xiao {
  font-size: 0.1rem; // 0.2rem * 0.5 = 0.1rem
}
.el-main {
  border-bottom: 0.1rem; // 0.1rem * 0.5 = 0.05rem
  border-style: solid;
  border-color: rgb(242, 242, 242);
}
.qowi {
  position: relative;
}
.xie {
  width: 1.5rem; // 1.5rem * 0.5 = 0.75rem
  height: 1.5rem; // 1.5rem * 0.5 = 0.75rem
  position: fixed;
  left: 43%;
  bottom: 5%; // 5% * 0.5 = 2.5%
  background-color: yellow;
  z-index: 999; // 999 * 0.5 = 499
  background-color: rgb(47, 135, 234);
  box-shadow: 0 0 5px 2.5px rgba(47, 135, 234, 0.3); // 各阴影参数减半
  border-radius: 50%;
  img {
    margin-top: 0.3rem; // 0.3rem * 0.5 = 0.15rem
    margin-left:  0.3rem; // 0.3rem * 0.5 = 0.15rem
    width: 60%; // 60% * 0.5 = 30%
    height: 60%; // 60% * 0.5 = 30%
  }
}

.common-layout {
  height: 100%;
  position: relative; /* 设置为相对定位 */
}

.tabs-with-icon {
  display: flex;
  align-items: center;
}

/* 2. 添加横向滚动 */
.scrollable-tabs {
  display: flex;
  overflow-x: auto; /* 启用横向滚动 */
  white-space: nowrap; /* 保证标签在一行内显示 */
}
.el.main {
  border-bottom: 0.1rem solid #ccc; // 0.1rem * 0.5 = 0.05rem
}
.tabs-hz {
  width: 100%;
  margin-top: 20px; // 20px * 0.5 = 10px
  border-top: 5px solid #ccc; // 5px * 0.5 = 2.5px
  position: relative; /* 设置为相对定位 */
}
.asd {
  padding: .3rem; //.3rem * 0.5 = 0.15rem
  padding-left: 0.1rem; // 0.1rem * 0.5 = 0.05rem
  position: relative;
  width: 98%;overflow-x: hidden;
  margin-left: .1rem; //.1rem * 0.5 = 0.05rem
  border-bottom: 0.1rem solid rgb(242, 242, 242); // 0.1rem * 0.5 = 0.05rem
  h2 {
    padding-top: .2rem; //.2rem * 0.5 = 0.1rem
    width: 9rem; // 9rem * 0.5 = 4.5rem
    margin-left: 0.5rem; // 0.5rem * 0.5 = 0.25rem
    font-weight: 500;
    line-height: .8rem; //.8rem * 0.5 = 0.4rem
    margin-left: 0.3rem; // 0.3rem * 0.5 = 0.15rem
    color: rgb(52, 52, 52);
  }
  p {
    width:  9rem; // 9rem * 0.5 = 4.5rem
    margin-left: 0.5rem; // 0.5rem * 0.5 = 0.25rem
    line-height: 15px; // 30px * 0.5 = 15px
    color: rgb(62, 62, 62);
    font-weight: 500;
    margin-left: 0.3rem; // 0.3rem * 0.5 = 0.15rem
    font-size: 10px; // 12px * 0.5 = 6px
  }
 .zxc {
    width: 3rem; // 3rem * 0.5 = 1.5rem
    position: absolute;
    bottom: 0%;
    left: 65%;
    font-size: 12.5px; // 25px * 0.5 = 12.5px
    font-weight: 600;
    color: rgb(119, 119, 119);
    line-height: 1rem; // 1rem * 0.5 = 0.5rem
    span {
      margin-left: 0.5rem; // 0.5rem * 0.5 = 0.25rem
    }
  }
}
.p1 {
  float: right;
}
.fg {
  width: 2rem; // 2rem * 0.5 = 1rem
  height: 2rem; // 2rem * 0.5 = 1rem
  background-color: #fff;
  position: absolute;
  top: 0%;
  left: 85%;
}
/* 3. 设置每个 tab 的宽度，可以根据需要调整 */
.el-tabs__header {
  display: flex;
  flex-wrap: nowrap;
}

.el-tab {
  width: 120px; // 120px * 0.5 = 60px
  text-align: center;
}

.search-icon {
  font-size: 1rem; // 1rem * 0.5 = 0.5rem
  cursor: pointer;
  /* margin-left: 10px;
  margin-top: -50px; */
  position: absolute; /* 绝对定位 */
  top: 3%;
  right: 0%;
  background-color: #fff;

  z-index: 9999; // 9999 * 0.5 = 4999
}

.el-header {
  width: 100%;
  height: 1.5rem; // 1.5rem * 0.5 = 0.75rem
  background-color: #fff;
  border-bottom:  0.2rem solid rgb(242, 242, 242); // 0.2rem * 0.5 = 0.1rem
  display: flex;
  margin-top: 0.2rem; // 0.2rem * 0.5 = 0.1rem
  align-items: center;
  justify-content: space-between;
  z-index: 999; // 999 * 0.5 = 499
}

.el-header-icon {
  font-size: 0.8rem; // 0.8rem * 0.5 = 0.4rem
}
</style>
